<!--
 * @Author: egg1bro
 * @Date: 2023-01-08 14:46:56
 * @LastEditTime: 2023-01-09 00:24:09
 * @LastEditors: egg1bro
 * @Description: 
 * @FilePath: \team-graduation-design\src\views\personInfo\updateName.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="page">
        <div class="nav">
            <!-- 导航栏 -->
            <van-nav-bar title="修改姓名">
                <template #left>
                    <van-icon name="arrow-left" size="20" color="#3c3c3c" @click="goPersonInfo" />
                </template>
                <template #right>
                    <span class="right_text" @click="submitName">完成</span>
                </template>
            </van-nav-bar>
        </div>
        <div class="ipt">
            <van-cell-group inset>
                <van-field v-model="message" rows="1" autosize clearable type="textarea" placeholder="请输入姓名" />
            </van-cell-group>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUpdateUserInfo } from '@/stores/updateUserInfo'
// 实例化路由
const router = useRouter()
// 实例化仓库
const updateUserInfo = useUpdateUserInfo()

const { getUpdateUserName } = updateUserInfo
const message = ref('')

// 跳转到personInfo界面
const goPersonInfo = () => {
    router.push('/personInfo')
}

// 提交用户姓名
const submitName = async () => {
    try {
        await getUpdateUserName({ user_name: message.value })
    } catch (error) {
        return Promise.reject(error)
    }
}
</script>

<style lang="less" scoped>
.page {
    width: 100%;
    height: 100%;
    background-color: #f5f6f8;
    // 此处写fixed才能应用到当前页面公共背景颜色
    position: fixed;
}

.nav {
    .right_text {
        color: #4d8fe3;

    }
}

.ipt {
    background-color: #fff;
}
</style>